<template>
  <el-dialog title="施肥信息" :visible.sync="visible">
    <el-form class="form">
      <el-form-item class="item" label="种植批次" :label-width="formLabelWidth">
        <el-input v-model="formData.plantId" class="in" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item class="item" label="地块号" :label-width="formLabelWidth">
        <el-input v-model="formData.areaId" class="in" autocomplete="off" disabled />
      </el-form-item>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">施肥人员</label>
        <el-select v-model="formData.employeeId" class="sel2" placeholder="请选择" style="width: 186px;">
          <el-option v-for="item in employeeList" :key="item.employee_id" :label="item.employee_name"
            :value="item.employee_id" />
        </el-select>
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">肥料名称</label>
        <el-select v-model="formData.fertilizerId" class="sel2" placeholder="请选择" style="width: 186px;">
          <el-option v-for="item in fertilizerList" :key="item.fertilizer_id" :label="item.fertilizer_name"
            :value="item.fertilizer_id" />
        </el-select>
      </div>
      <el-form-item class="item" label="施肥时间" :label-width="formLabelWidth">
        <el-date-picker v-model="formData.useTime" type="datetime" class="in" autocomplete="off" placeholder="施肥时间"
          value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item>
      <el-form-item class="item" label="备注" :label-width="formLabelWidth">
        <el-input v-model="formData.remark" class="in" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getAllProduct } from "@/api/plant/product"
import { getAllEmployee } from "@/api/plant/employee"
import { getAllFertilizer } from "@/api/plant/fertilizer"
import { plantTypeList } from "@/config/dict/trace"
import { saveFertilizerUse } from '@/api/plant/fertilization'
export default {
  data () {
    return {
      visible: false,
      formData: {
        id: '',
        employeeId: '',
        employeeName: '',
        plantMethod: '',
        plantTime: '',
        productId: '',
        productName: '',
        remark: '',
        areaId: ''
      },
      plant: {},
      employeeList: [],
      productList: [],
      fertilizerList: [],
      plantTypeOption: plantTypeList,
      formLabelWidth: '120px',
    }
  },
  methods: {
    async init (plant) {
      this.plant = plant
      this.visible = true
      this.formData = {
        id: '',
        plantId: plant.id,
        areaId: plant.areaId,
        employeeId: '',
        employeeName: '',
        fertilizerId: '',
        fertilizerName: '',
        useTime: '',
        productId: '',
        productName: '',
        remark: ''
      }
      this.getEmployee()
      this.getProduct()
      this.getFertilize()
    },
    async getEmployee () {
      getAllEmployee().then(res => {
        this.employeeList = res.data
      })
    },
    async getProduct () {
      getAllProduct().then(res => {
        this.productList = res.data
      })
    },
    async getFertilize () {
      getAllFertilizer().then(res => {
        this.fertilizerList = res.data
      })
    },
    confirm () {
      for (let i = 0; i < this.employeeList.length; i++) {
        const e = this.employeeList[i]
        if (e.employee_id == this.formData.employeeId) {
          this.formData.employeeName = e.employee_name
        }
      }
      for (let i = 0; i < this.fertilizerList.length; i++) {
        const e = this.fertilizerList[i]
        if (e.fertilizer_id == this.formData.fertilizerId) {
          this.formData.fertilizerName = e.fertilizer_name
        }
      }
      saveFertilizerUse(this.formData).then(response => {
        if (response.statusCode == 20000) {
          this.refresh()
          this.visible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '发生错误，操作失败',
            type: 'warning'
          })
        }
      })
    },
    refresh () {
      this.$emit('refresh')
    }
  }
}
</script>

<style>
.form {
  margin-bottom: 20px;
}
</style>
